<template>
	<view>
		<view class="nav-wrapper">
			<view style="background-color: transparent;" class="status-bar-height"></view>
			<image class="nav-bg pos-fill" src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/navbar_bg.png" mode=""></image>
			<view class="nav-box flex flex-align-center flex-space-between">
				<view class="flex flex-align-center" v-if="!titleObj.isBack">
					<image style="width: 26rpx;height: 32rpx;" src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/ic_address.png" mode=""></image>
					<text class="left-text">长沙</text>
				</view>
				<image @click="handlerBack" style="width: 20rpx;height: 34rpx;position: relative;z-index: 9999;" v-else src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/arrow_l.png" mode=""></image>
				<view class="title pos-fill flex-center flex">{{ titleObj.title }}</view>
			</view>
		</view>
		<view class="size-box"></view>
	</view>
</template>

<script setup lang="ts">
		const props = defineProps({
			titleObj: {
				type: Object,
				default: {}
			}
		})
		
		function handlerBack () {
			console.log('22')
			uni.navigateBack()
		}
</script>

<style lang="scss">
	.size-box {
		height: 88rpx;
		padding-bottom: var(--status-bar-height);
	}
	.nav-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		padding: 0 20rpx;
		height: 488rpx;
		.nav-bg {
			width: 100%;
			height: 488rpx;
		}
		.nav-box {
			height: 88rpx;
			position: relative;
			font-weight: 500;
			color: #181D18;
			z-index: 22;
			.left-text {
				font-size: 28rpx;
				margin-left: 8rpx;
			}
			.title {
				font-size: 36rpx;
			}
		}
	}
</style>